<!DOCTYPE html>
<html>

<head>
    <title> 4-7 作用域插槽</title>
    <script type="text/javascript" src="../../vue.js"></script>
</head>

<body>
    <div id='root'>
        <child>
            <!-- 
				要想实现父组件控制子组件显示什么样的dom,那么就要使用template模板,并使用  slot-scope关键字接收子组件传递的数据内容,
			 -->
            <template slot-scope="abc">
				<!-- <li>{{abc.item}}</li> -->
				<h1>{{abc.item}}</h1>
			</template>
        </child>
    </div>

    <script type="text/javascript">
        Vue.component('child', {
            data: function() {
                return {
                    list: ['a', 'b', 'c', 'd']
                }
            },
            // template:`<div>
            // 			<ul>
            // 				<li v-for="item of list">{{item}}</li>
            // 			</ul>
            // 		  </div>`

            /**
             * 有的时候希望父组件决定子组件显示什么样的dom结构循环列表,就要用到作用域插槽
             */
            template: `<div>
						<ul>
							<slot v-for="item of list" v-bind:item=item></slot>
						</ul>
					  </div>`
        })
        var vm = new Vue({
            el: '#root'
        })
    </script>
</body>

</html>